<template>
  <view class="view-history-container">
    <!-- 自定义头部 -->
    <CustomHeader></CustomHeader>
    
    <!-- 页面标题 -->
    <view class="header">
      <view class="header-content">
        <view class="back-btn" @click="goBack">
          <image
            class="back-icon"
            src="/static/icons/candidate/pre_page.png"
          ></image>
        </view>
        <text class="header-title">浏览记录</text>
        <view class="header-right"></view>
      </view>
    </view>

    <!-- 浏览简历列表 -->
    <scroll-view class="resume-list" scroll-y @scrolltolower="loadMore">
      <view
        class="resume-card"
        v-for="(resume, index) in resumeList"
        :key="index"
        @click="viewResumeDetail(resume)"
      >
        <view class="resume-header">
          <image
            class="avatar"
            :src="resume.face || '/static/images/avatar.png'"
          />
          <view class="basic-info">
            <view class="name-section">
              <text class="name">{{ resume.realName || resume.nickName }}</text>
              <text class="status" v-if="resume.status">{{ resume.status }}</text>
            </view>
            <view class="edu-info">
              <text class="education" v-if="resume.education">{{ resume.education }}</text>
              <text class="school" v-if="resume.school">{{ resume.school }}</text>
              <text class="major" v-if="resume.major">{{ resume.major }}</text>
            </view>
          </view>
          <view class="actions">
            <view class="salary" v-if="resume.expectBeginSalary && resume.expectEndSalary">
              {{ resume.expectBeginSalary }}-{{ resume.expectEndSalary }}K
            </view>
          </view>
        </view>

        <!-- 个人优势 -->
        <view class="advantage-section" v-if="resume.advantage">
          <text class="advantage-text">{{ getDisplayAdvantage(resume.advantage) }}</text>
        </view>

        <!-- 技能标签 -->
        <view class="resume-tags" v-if="resume.skills">
          <text
            class="tag"
            v-for="(skill, skillIndex) in getSkillTags(resume.skills)"
            :key="skillIndex"
          >{{ skill }}</text>
        </view>

        <!-- 证书标签 -->
        <view class="credentials-tags" v-if="resume.credentials">
          <text
            class="credential-tag"
            v-for="(credential, credIndex) in getCredentialTags(resume.credentials)"
            :key="credIndex"
          >{{ credential }}</text>
        </view>

        <!-- 浏览时间 -->
        <view class="view-time" v-if="resume.viewTime">
          <text class="time-text">浏览于 {{ formatViewTime(resume.viewTime) }}</text>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="resumeList.length === 0 && !loading">
        <image class="empty-icon" src="/static/icons/candidate/collect.png"></image>
        <text class="empty-text">暂无浏览记录</text>
        <text class="empty-tip">去发现页面查看优秀的候选人吧~</text>
      </view>

      <!-- 加载更多 -->
      <uni-load-more 
        :status="loadingStatus" 
        :content-text="{
          contentdown: '上拉显示更多',
          contentrefresh: '正在加载...',
          contentnomore: '没有更多浏览记录了~'
        }"
        style="margin-bottom: 40rpx;"
      />
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getHrViewRecordList } from "@/api/resume.js";
import CustomHeader from "@/components/CustomHeader.vue";

// 浏览记录列表
const resumeList = ref([]);
const loading = ref(false);
const loadingStatus = ref("more");

// 分页参数
const pageParams = ref({
  pageNo: 1,
  pageSize: 10
});

const totalPages = ref(0);

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 查看简历详情
const viewResumeDetail = (resume) => {
  uni.navigateTo({
    url: `/pages/candidate/resume/resumePreview?userId=${resume.userId}&resumeExpId=${resume.resumeExpId}`,
  });
};

// 获取浏览记录列表
const fetchViewRecords = async (isLoadMore = false) => {
  if (loading.value) return;
  
  loading.value = true;
  
  try {
    if (!isLoadMore) {
      pageParams.value.pageNo = 1;
      resumeList.value = [];
      loadingStatus.value = "loading";
    }
    
    const response = await getHrViewRecordList(pageParams.value);
    
    if (response && response.list !== undefined) {
      if (isLoadMore) {
        resumeList.value = [...resumeList.value, ...response.list];
      } else {
        resumeList.value = response.list;
      }
      
      totalPages.value = response.totalPages || 0;
      
      // 更新加载状态
      if (pageParams.value.pageNo >= totalPages.value) {
        loadingStatus.value = "noMore";
      } else if (response.list.length === 0) {
        loadingStatus.value = "noMore";
      } else {
        loadingStatus.value = "more";
      }
    } else {
      loadingStatus.value = "noMore";
    }
  } catch (error) {
    console.error("获取浏览记录失败:", error);
    uni.showToast({
      title: "获取浏览记录失败",
      icon: "none",
      duration: 2000
    });
    loadingStatus.value = "more";
  }
  
  loading.value = false;
};

// 加载更多
const loadMore = async () => {
  if (loadingStatus.value === "noMore" || loading.value) return;
  
  pageParams.value.pageNo++;
  await fetchViewRecords(true);
};

// 处理个人优势显示（限制字数）
const getDisplayAdvantage = (advantage) => {
  if (!advantage) return "";
  
  // 移除HTML标签和换行符
  const plainText = advantage.replace(/<[^>]*>/g, "").replace(/\n/g, " ");
  
  // 限制显示字数
  if (plainText.length > 50) {
    return plainText.substring(0, 50) + "...";
  }
  
  return plainText;
};

// 处理技能标签
const getSkillTags = (skills) => {
  if (!skills) return [];
  
  const skillArray = skills.split(',').filter(item => item.trim());
  // 最多显示5个技能
  return skillArray.slice(0, 5);
};

// 处理证书标签
const getCredentialTags = (credentials) => {
  if (!credentials) return [];
  
  const credentialArray = credentials.split(',').filter(item => item.trim());
  // 最多显示3个证书
  return credentialArray.slice(0, 3);
};

// 格式化浏览时间
const formatViewTime = (timeString) => {
  if (!timeString) return "";
  
  const date = new Date(timeString);
  const now = new Date();
  const diff = now.getTime() - date.getTime();
  
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor(diff / (1000 * 60 * 60));
  const minutes = Math.floor(diff / (1000 * 60));
  
  if (days > 0) {
    return `${days}天前`;
  } else if (hours > 0) {
    return `${hours}小时前`;
  } else if (minutes > 0) {
    return `${minutes}分钟前`;
  } else {
    return "刚刚";
  }
};

// 页面加载时获取数据
onMounted(() => {
  fetchViewRecords();
});
</script>

<style lang="scss" scoped>
.view-history-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* 页头样式 */
.header {
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  height: 88rpx;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 48rpx;
  height: 48rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.header-right {
  width: 60rpx;
}

/* 简历列表 */
.resume-list {
  height: calc(100vh - 200rpx);
  padding: 20rpx;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.resume-card {
  background: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.resume-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  width: 100%;
  overflow: hidden;

  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
    flex-shrink: 0;
  }

  .basic-info {
    flex: 1;
    min-width: 0; /* 允许flex项目缩小到内容宽度以下 */
    overflow: hidden;

    .name-section {
      display: flex;
      align-items: center;
      margin-bottom: 8rpx;
      overflow: hidden;

      .name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-right: 12rpx;
        flex-shrink: 0;
        max-width: 200rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .status {
        font-size: 20rpx;
        color: #00bdb4;
        background-color: #e8f7f7;
        padding: 4rpx 8rpx;
        border-radius: 4rpx;
        flex-shrink: 0;
        white-space: nowrap;
      }
    }

    .edu-info {
      display: flex;
      align-items: center;
      overflow: hidden;
      width: 100%;
      
      .education {
        font-size: 26rpx;
        color: #666;
        margin-right: 8rpx;
        flex-shrink: 0;
        white-space: nowrap;
      }
      
      .school {
        font-size: 26rpx;
        color: #666;
        margin-right: 8rpx;
        max-width: 150rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .major {
        font-size: 26rpx;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
      }
    }
  }

  .actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10rpx;
    flex-shrink: 0;
    margin-left: 20rpx;

    .salary {
      font-size: 28rpx;
      color: #00bdb4;
      font-weight: bold;
      white-space: nowrap;
    }
  }
}

/* 个人优势 */
.advantage-section {
  margin-bottom: 15rpx;
  width: 100%;
  overflow: hidden;
  
  .advantage-text {
    font-size: 26rpx;
    color: #666;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* 技能标签 */
.resume-tags {
  margin-bottom: 15rpx;
  width: 100%;
  overflow: hidden;

  .tag {
    display: inline-block;
    background: #e8f4ff;
    color: #1890ff;
    padding: 6rpx 12rpx;
    margin-right: 12rpx;
    margin-bottom: 8rpx;
    border-radius: 4rpx;
    font-size: 22rpx;
    max-width: 150rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 证书标签 */
.credentials-tags {
  margin-bottom: 15rpx;
  width: 100%;
  overflow: hidden;
  
  .credential-tag {
    display: inline-block;
    background: #fff7e6;
    color: #fa8c16;
    padding: 6rpx 12rpx;
    margin-right: 12rpx;
    margin-bottom: 8rpx;
    border-radius: 4rpx;
    font-size: 22rpx;
    max-width: 150rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 浏览时间 */
.view-time {
  display: flex;
  justify-content: flex-end;
  margin-top: 10rpx;

  .time-text {
    font-size: 22rpx;
    color: #999;
  }
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 40rpx;
  
  .empty-icon {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 30rpx;
    opacity: 0.3;
  }
  
  .empty-text {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 16rpx;
  }
  
  .empty-tip {
    font-size: 26rpx;
    color: #999;
    text-align: center;
  }
}
</style>


